<template>
    <div style="margin:10px;">
        <ExtForm ref="ExtForm" :formfields="formfields" @changeEventHandler="changeEventHandler"></ExtForm>
        <a-button  shape="round" size="small" type="primary" icon="plus" @click="fieldEdit({component:pageSetting.常量.表单组件类型.单行文本})">添加字段</a-button>
        <div class="ant-list ant-list-sm ant-list-split" style="max-height:60vh; overflow: auto;">
            <div class="ant-spin-nested-loading">
                <div class="ant-spin-container">
                    <ul class="ant-list-items">
                        <draggable :list="component.props.formAttributes" :sort="true" :animation="150" :group="{ name: 'field', pull: false, put: false }">
                            <li class="ant-list-item" v-for="(field,idx) in component.props.formAttributes" :key="idx">
                                <div class="ant-list-item-meta">
                                    <div class="ant-list-item-meta-content">
                                        <h4 class="ant-list-item-meta-title">
                                            <a @click="fieldEdit(field)">{{field.label}}</a>
                                            <a-divider type="vertical" />
                                            <a @click="fieldDel(field)">删除</a>
                                        </h4>
                                        <div class="ant-list-item-meta-description">
                                            <a-breadcrumb separator="">
                                                <a-breadcrumb-item>字段代码</a-breadcrumb-item>
                                                <a-breadcrumb-separator>:</a-breadcrumb-separator>
                                                <a-breadcrumb-item >{{field.field}}</a-breadcrumb-item>
                                            </a-breadcrumb>
                                            
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </draggable>
                    </ul>
                </div>
            </div>
        </div>

        <QueryFormFieldAttribute ref="QueryFormFieldAttribute" @addField="addField"></QueryFormFieldAttribute>
    </div>
</template>
<script>

import pageSetting from '@/components/lt/codeGenerator/pageSetting'
import Vue from 'vue'
import ExtForm from '@/components/lt/codeGenerator/components/ExtForm'
import {SysMixin} from '@/mixins/SysMixin'
import QueryFormFieldAttribute from '@/components/lt/codeGenerator/attribute/QueryFormFieldAttribute'
import draggable from 'vuedraggable'
import { Modal } from 'ant-design-vue'
export default {
    name:'ColAttribute',
    mixins:[SysMixin],
    components:{ExtForm,QueryFormFieldAttribute,draggable},
    props:{
        component:{
           type:Object,
           default:()=>{}
        },
    },
    watch:{
        
    },
    data(){
        return{
            pageSetting,
            formfields:[
                {field:'label',label:'标题',component:pageSetting.常量.表单组件类型.单行文本,initialValue:this.component.label,rules: [{ required: true, message: '不能为空!' }]},
                {field:'ref',label:'ref',component:pageSetting.常量.表单组件类型.单行文本,initialValue:this.component.ref,disabled:true},
                {field:'isShowReset',label:'是否显示重置',component:pageSetting.常量.表单组件类型.开关,initialValue:this.component.props['isShowReset'],checkedChildren:true,unCheckedChildren:false,rules: [{ required: false, message: '不能为空!' }]},
                // {field:'labelSpan',label:'标题占栅格数',component:pageSetting.常量.表单组件类型.下拉选择,options:pageSetting.数据字典.栅格占位格数,initialValue:this.component.props['labelSpan'],disabled:false},
                // {field:'wrapperSpan',label:'内容占栅格数',component:pageSetting.常量.表单组件类型.下拉选择,options:pageSetting.数据字典.栅格占位格数,initialValue:this.component.props['wrapperSpan'],disabled:false},
                {field:'mostColumns',label:'最多列数',component:pageSetting.常量.表单组件类型.下拉选择,options:pageSetting.数据字典.表单列数,initialValue:this.component.props['mostColumns'],disabled:false},
                {field:'changeEvent',label:'change事件',component:pageSetting.常量.表单组件类型.单行文本,initialValue:this.component.props['changeEvent']},
                {field:'queryEvent',label:'查询事件',component:pageSetting.常量.表单组件类型.单行文本,initialValue:this.component.props['changeEvent']},

                
            ]
               
        }
    },
   
    created(){
        
    },
    methods:{
        addField(field){
            let count = 0
            for (let f of this.component.props.formAttributes) {
                if(f.field==field.field){
                    count++
                }
            }
            if(count==0){
                this.component.props.formAttributes.push(field)
            }
        },
        fieldEdit(field){
            this.handleEdit(field,'QueryFormFieldAttribute','查询条件添加')
        },
        fieldDel(field){
            Modal.confirm({
                title: "系统提醒",
                content: "确定删除？",
                onOk: () => {
                    this.component.props.formAttributes = this.component.props.formAttributes.filter(item=>{
                        return item.field!=field.field
                    })
                },
                onCancel () {}
            })
        },
        changeEventHandler(item){
         
            if(item["label"]){
                this.component.label=item.label
                for(let i=0;i<this.component.components.length;i++){
                    if(this.component.components[i].type==pageSetting.常量.组件.标题){
                        this.component.components[i].label=item.label
                    }
                }
            }else{
                for (const key in item) {
                    Vue.set(this.component.props,key,item[key])
                }
            }

        }
    }
}
</script>